<!DOCTYPE html>
<html>
<head>
	<title></title>
	<script type="text/javascript" src="./js/d3.v3.min.js"></script>
	<style type="text/css">
		svg{border: 1px solid #333;}
	</style>
	<script type="text/javascript">
		window.onload=function(){
			//添加svg
			var svg=d3.select("body").append("svg")
				.attr("width",600)
				.attr("height",400)

			// 线性比例尺
			var xScale=d3.scale.linear()
						.domain([0,120])
						.range([0,600-50])

			// var result =xScale(60)
			// console.log(result)
			//准备数据
			var arr=[100,120,90,60]

			//数据绑定
			svg.selectAll("rect").data(arr)
					.enter()
					.append("rect")
					.attr("x",0)
					.attr("y",(item,index)=>{
						return 20*(index+1)+50*index
					})
					.attr("width",(item,index)=>{
						return xScale(item)
					})
					.attr("height",50)
					.attr("fill","tomato")
		}
	</script>

</head>
<body></body>
</html>